<template>
    <div class="timeLine">
        <el-timeline style="max-width: 600px">
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                :type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
                :timestamp="activity.timestamp">
                {{ activity.content }}
            </el-timeline-item>
        </el-timeline>
        <div class="tips">*摘抄自现代互联网</div>
    </div>
</template>

<script setup lang="ts">
const activities = [
    {
        content: '下雨了，牛会自己躲进牛棚，马会自己躲进马厩，只有牛马会想进一切办法去上班。🤣',
        timestamp: '2024-09-20 08:46',
        size: 'large',
        type: 'primary',
    },
    {
        content: '忙了一天，钱虽然没挣着，倒也没白干，起码累着了。😋',
        timestamp: '2024-09-03 20:46',
        color: '#0bbd87',
    },
    {
        content: '有的人出生就在罗马，而有的人生来就是牛马。😆',
        timestamp: '2021-03-20 20:46',
        size: 'large',
    }
]
</script>

<style lang="scss" scoped>
.timeLine {
    height: 250px;
    padding: 24px 0;
    box-sizing: border-box;
    position: relative;
}

.time {
    height: 30px;
    margin-bottom: 12px;
}

.tips {
    width: 100%;
    font-size: 12px;
    // margin-left: 32px;
    position: absolute;
    bottom: 6px;
    left: 42px;
}

.timeLine::-webkit-scrollbar {
    background-color: transparent;
}

.timeLine::-webkit-scrollbar-track-piece {
    background-color: transparent;
}
</style>